<template>
    <div>
        <!--:buttonItems="buttonItems"-->
        <tableList
            ref="tableList"
            :apis="apis"
            :formTitle="formTitle"
            :headItems="headItems"
            :actItems="actItems"
            :formWidth="formWidth"
            :formItems="formItems"
            @actButEvent="actButEvent"
        ></tableList>

        <!--权限弹窗-->
        <el-dialog
            top="10vh"
            :width="formWidth + 'px'"
            :visible.sync="dialogAuthVisible"
            v-if="dialogAuthVisible"
            :destroy-on-close="true"
            title="权限管理"
            :close-on-click-modal="false"
            :append-to-body="true"
        >
            <dialogform
                ref="dialogform"
                :apis="apis"
                v-loading="formLoading"
                :formItems="formItemsAuth"
                :formData="formData"
                @cancelEvent="dialogAuthVisible = false"
                @submitEvent="submitEvent"
            ></dialogform>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "manage-list",
        components: {
            dialogform: () => import('@/components/plugins/form'),
        },
        data () {
            return {
                apis: {
                    list: {
                        url: this.$api.V2X_USERS_GET,
                        params: {
                            with: 'permissions',
                            sortedBy: 'desc',
                            orderBy: 'id'
                        }
                    },
                    add: this.$api.V2X_USERS_ADD,
                    auth: this.$api.V2X_AUTH_POST,
                    // detail: this.$api.V2X_RULER_GET,
                    update: this.$api.V2X_USERS_PATCH,
                    delete: this.$api.V2X_USERS_DELETE
                },
                formTitle: this.$t('page.manage.list.formTitle'),
                // 按钮
                /*buttonItems: [
                    {
                        label: "新增",
                        key: "addEdit",
                        icon: 'el-icon-plus'
                    }
                ],*/
                headItems: [
                    { key: 'name', label: this.$t('page.manage.list.headItems.name') },
                    { key: 'tel', label: this.$t('page.manage.list.headItems.tel') },
                    { key: 'email', label: this.$t('page.manage.list.headItems.email') },
                    { key: 'status', label: this.$t('page.manage.list.headItems.status'), type: 'dict' },
                    { key: 'avatar', label: this.$t('page.manage.list.headItems.avatar'), type: 'image' },
                    { key: 'created_at', label: this.$t('page.manage.list.headItems.created_at'), type: 'datetime' },
                    { key: 'updated_at', label: this.$t('page.manage.list.headItems.updated_at'), type: 'datetime' },
                ],
                actItems: [],
                formWidth: '500',
                formItems: [
                    {
                        key: "name",
                        label: this.$t('page.manage.list.headItems.name'),
                    },
                    {
                        key: "tel",
                        label: this.$t('page.manage.list.headItems.tel'),
                        type: 'phone',
                        rule: ["NotBlank"]
                    },
                    {
                        key: "email",
                        label: this.$t('page.manage.list.headItems.email'),
                        disabled: true,
                        type: 'email',
                        rule: ["NotBlank", 'Email']
                    },
                    {
                        key: "status",
                        label: this.$t('page.manage.list.headItems.status'),
                        type: "radio",
                        options: [
                            { key: this.$t('page.system.switch.disable'), value: 0 },
                            { key: this.$t('page.system.switch.enable'), value: 1 }
                        ],
                    },
                    {
                        key: "password",
                        label: this.$t('page.system.form.password')
                    },
                    {
                        key: "password_confirmation",
                        label: this.$t('page.system.form.passcheck')
                    }
                ],

                formData: {},
                dialogAuthVisible: false, // 权限弹窗
                formItemsAuth: [
                    {
                        key: "name",
                        label: this.$t('page.manage.list.headItems.name'),
                        disabled: true,
                    },
                    {
                        key: "permissions",
                        label: "权限",
                        type: 'tree',
                        defaultProps: {
                            children: "children",
                            label: "display_name"
                        }
                    }
                ],
                formLoading: false,
            }
        },
        mounted() {
            this.getAuthList();
        },
        methods: {
            actButEvent(e) {
                this[e.eventName](e.val);
            },

            // 获取权限列表
            getAuthList() {
                this.$api.V2X_PERMISSIONSTREE_GET({
                    guard_name: 'v2x;ruler;person'
                }).then(res => {
                    this.formItemsAuth[this.formItemsAuth.length - 1].treeList = res
                })
            },

            // 打开授权弹窗
            auth(e) {
                console.log(e)
                let obj = {
                    id: e.id,
                    name: e.name,
                    permissions: []
                }
                let arr = []
                e.permissions.forEach(item => {
                    arr.push(item.id)
                    obj.permissions = arr
                })
                this.formData = _.cloneDeep(obj)
                console.log(this.formData)
                this.dialogAuthVisible = true;
            },
            // 提交修改的权限
            submitEvent() {
                this.formLoading = true;
                let routes = ''
                if (this.formData.permissions) {
                    routes = this.formData.permissions.split(",")
                }
                this.$api.V2X_AUTH_POST({
                    routes
                },this.formData.id).then(res => {
                    this.dialogAuthVisible = false;
                    this.formLoading = false;
                    this.$refs.tableList.getListData();
                    this.formData = {};
                    this.$message({
                        message: "操作成功 !",
                        type: "success"
                    });
                }).catch(err => {
                    this.formLoading = false;
                })
            },


            detailAct(e) {
                this.actStatus = e.status;
                this.title = e.time;
                this.id = e.id;
                this.apisAddDeduction.list.params.id = e.id;
                this.dialogDetailActVisible = true;
                this.formLoading = true;
                this.detailHeader();
                this.apisDetailAct.list.params.id = e.id;
                this.apisDetailAct.export.params.id = e.id;
                this.apisDetailAct.total.params.id = e.id;
            },
        }
    }
</script>

<style scoped>

</style>
